<template>
	<view class="page flex flex-col text-white loginBg">
		<view :style="{'paddingTop':startTop + 'px'}" class="myPage" style="position:relative;z-index:99;">
			<view class="headTitle">
				<view class="flex-center text-32 " :style="{'lineHeight':nangHeight + 'px'}">
					登录
				</view>
			</view>
		</view>
		<view class="flex-center">
			<image @click="addDevice" class="logoIcon"
				src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/logo@2x.png" mode="aspectFill">
			</image>
		</view>
		<view style="margin-top: 108rpx;" class="flex-center" @click="wechat('weixin')">
			<view class="flex-center loginBtn">
				<button v-if="!isShowBtn" class="btn flex-center" form-type="submit" open-type="">
					<image src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/weixin.png" class="wxLoginBtn"
						mode="aspectFill"></image>
					微信登录
				</button>
				<button v-else class="btn flex-center" form-type="submit" open-type="getPhoneNumber"
					@getphonenumber="getphonenumber">
					<image class="wxLoginBtn" src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/weixin.png"
						mode="aspectFill"></image>
					微信登录
				</button>
			</view>
		</view>

		<!-- <button class="btn flex-center" open-type="getPhoneNumber" @getphonenumber="getPhoneCurNumber">
			<image class="wxLoginBtn" src="http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/weixin.png"
				mode="aspectFill"></image>
			微信登录00
		</button> -->
		<view style="margin-top:40rpx;font-size:24rpx;" class="flex-center">
			<up-checkbox-group v-model="selectAgreen" @change="checkboxChange">
				<u-checkbox activeColor="#129A80" shape="circle" size="16"></u-checkbox>
			</up-checkbox-group>
			<text>我已阅读并同意</text>
			<text class="text-green" @click="agreement(1)">《服务协议》</text>
			<text>和</text>
			<text class="text-green" @click="agreement(2)">《隐私政策》</text>
		</view>

	</view>
</template>

<script setup>
	import * as api from "@/utils/api.js"
	import {
		ref,
		reactive,
		onMounted,
		inject
	} from 'vue';
	import {
		test
	} from 'uview-plus';
	import {
		onShow
	} from '@dcloudio/uni-app';

	onShow(() => {
		if (uni.getStorageSync("code")) {
			invCodeUser.value = uni.getStorageSync("code");
		}
	})

	// 登录对象
	const login = reactive({
		phone: "",
		code: ""
	});

	// 协议状态
	const selectAgreen = ref([]);

	// 
	const cashChecked = ref(false);

	// 微信登录按钮的切换
	const isShowBtn = ref(false);

	// 协议发生改变
	const checkboxChange = (n) => {
		if (n.length) {
			cashChecked.value = true;
			isShowBtn.value = true;
		} else {
			cashChecked.value = false
		}
	}

	// 微信授权code
	const wxCode = ref("");
	// 获取手机号code
	const phoneCode = ref("");

	// 微信登录
	const wechat = (desc) => {
		if (!cashChecked.value) {
			uni.showToast({
				title: "请先阅读并同意《服务协议》《隐私政策》",
				icon: "none",
				duration: 2000,
			})
			return
		}

		// #ifdef H5
		// 公众号授权
		// this.getGongZhongHao();
		// #endif
		// #ifdef MP

		uni.showLoading({
			title: '正在登录'
		});
		uni.login({
			provider: "weixin",
			success: (res) => {
				wxCode.value = res.code;
				getphonenumber();
			},
			fail: (error) => {
				console.log("error", error);
			}
		})

		// /app-api/member/auth/weixin-mini-app-login

		// #endif
		//微信小程序 || APP
		// #ifdef APP-PLUS
		let that = this;
		that.provider = desc;
		if (that.provider == 'weixin') {
			uni.showLoading({
				title: '正在登录'
			});
			uni.login({
				provider: "weixin",
				success: (res) => {
					uni.getUserInfo({
						provider: that.provider,
						success: res => {

						},
						fail: err => {
							console.log(err)
						}
					});

				},
				fail: (error) => {
					console.log("error", error);
				}
			})
		}
		// #endif
	}

	// 获取手机code
	const getphonenumber = (val) => {
		if (val) {

			phoneCode.value = val.detail.code;
			uni.hideLoading();

			// 登录逻辑
			loginIndex()
		}
	}

	// 推广码
	const invCodeUser = ref("")

	const loginIndex = () => {
		let e = {
			url: '/app-api/member/auth/weixin-mini-app-login',
			data: {
				"phoneCode": phoneCode.value,
				"loginCode": wxCode.value,
				"state": "9b2ffbc1-7425-4155-9894-9d5c08541d62",
				"invCode": invCodeUser.value ? invCodeUser.value : 'FWYE'
			}
		};

		api.default.post(e).then((res) => {
			if (res.data.accessToken) {
				uni.setStorageSync("token", res.data.accessToken)
				uni.reLaunch({
					url: "/pages/index/index"
				})
			}
		})
	}

	// 协议跳转
	const agreement = (index) => {
		switch (index) {
			case 1:
				uni.navigateTo({
					url: "/pagesA/my/myChild/userService"
				})
				break;
			case 2:
				uni.navigateTo({
					url: "/pagesA/my/myChild/privacyPage"
				})
				break;
			default:
				return
				break;
		}
	}




	const imageUrl = ref();
	// 胶囊顶部的距离
	const startTop = ref("");

	// 胶囊的高度
	const nangHeight = ref("");

	// 页面挂在完成
	onMounted(() => {
		// 全局变量引入
		const globalData = inject('globalData');

		// 胶囊距离顶部的距离
		startTop.value = globalData.value.barTop;


		// 设置胶囊的高度
		nangHeight.value = globalData.value.capsuleData.height;

		imageUrl.value = globalData.value.imgOssUrl;
	})
</script>

<style scoped>
	.loginBg {
		background: url("http://yyx-web-oss.oss-cn-beijing.aliyuncs.com/home/loginBg.png") no-repeat;
		background-size: 100% 100%;
	}

	.wxLoginBtn {
		width: 39rpx;
		height: 32rpx;
		margin-right: 10rpx;
	}

	button::after {
		border: none;
		background-color: none;
	}

	.page /deep/ uni-button {
		background-color: transparent !important;
		color: #fff;
	}

	.page /deep/ button {
		background-color: transparent !important;
		color: #fff;
	}

	.btn {
		font-size: 30rpx !important;
	}

	.loginBtn {
		width: 610rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #A102FF 0%, #162CFF 100%);
		border-radius: 50rpx;
		color: #04FFFF;
	}

	.tuiCode {
		margin: 30rpx 0 154rpx 0;
	}

	.logoIcon {
		width: 188rpx;
		height: 188rpx;
		margin: 100rpx 0 0 0;
	}

	.page /deep/ .u-border {
		border-color: rgba(22, 179, 255, 0.25) !important;

	}

	.page /deep/ .u-input {
		background-color: #141039;
		height: 60rpx;
	}

	.page /deep/ .uni-input-input {
		color: #fff !important;
	}

	.page /deep/ .uni-input-wrapper {
		font-size: 26rpx;

	}
</style>